<template>
  <!-- APP风险分析 -->
  <div class="chart-container" id="home2" style="width: 100%;height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: '',
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    let that = this;
    setTimeout(function () {
      that.initChart2();
    }, 0)
  },

  methods: {
    /**
     * 初始化图表2
     */
    initChart2() {
      var chartDom = document.getElementById('home2');
      var myChart = echarts.init(chartDom);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      var option;
      const trafficWay = [
        {value: 1015, name: '100'},
        {value: 2043, name: '200'},
        {value: 3043, name: '300'},
        {value: 4043, name: '400'},
        {value: 5043, name: '500'}
      ];
      let data = trafficWay.map(item => item.value);
      let categories = trafficWay.map(item => item.name);

      option = {
        title: {
          textStyle: {
            color: '#19E1E3',
            fontSize: 25,
          },
          x: 'center',
          y: 'top'
        },
        xAxis: {
          type: 'category',
          data: categories,
          axisLabel: {
            color: '#fff',
            fontWeight: 'bolder',
            fontSize: 12,
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
            fontWeight: 'bolder',
            fontSize: 12,
          }
        },
        series: [{
          data: data,
          type: 'line',
          smooth: true,
          lineStyle: {
            color: '#19E1E3',
            width: 2
          },
          itemStyle: {
            color: '#19E1E3'
          }
        }],
        tooltip: {
          trigger: 'axis'
        }
      };
      option && myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
